<template>
  <div :class="isDark ? '' : 'bg-white'" class="main-box">
    <PlusSearch
      v-if="formConfig && formConfig.length"
      ref="formRef"
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-2"
      @search="initData()"
      @reset="initData(true)"
    />
    <slot name="button" />
    <template v-if="props.exportConfig">
      <btnExport :exportApi="exportConfig.api" :queryform="getForm" />
    </template>
    <PureTable
      ref="tableRef"
      class="mt-2"
      border
      adaptive
      stripe
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="props.hasPagination ? pagination : null"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
      @selection-change="handleSelectionChange"
    />

    <slot />
  </div>
</template>

<script setup lang="tsx">
import { ref, onMounted, computed } from "vue";
import { PlusSearch } from "plus-pro-components";
import { useTableConfig } from "@/utils/tableConfig";
import btnExport from "@/components/btnExport/index.vue";

import "plus-pro-components/es/components/search/style/css";

// 主题变化
import { useDark } from "@pureadmin/utils";
const { isDark } = useDark();

// 参数
const props = defineProps({
  formConfig: {
    default: () => []
  },
  getQueryform: {
    type: Function,
    default: null
  },
  columns: {
    default: () => []
  },
  api: {
    type: [Function]
  },
  hasPagination: {
    type: Boolean,
    default: true
  },
  exportConfig: {
    default: null,
    type: [Object, Array]
  }
});
const { formConfig, columns } = props;
const exportConfig = computed(() => {
  let d = {} as any;
  if (props.exportConfig) {
    d = props.exportConfig;
  }
  return d;
});

const emit = defineEmits(["multipleSelection"]);
// 搜索
const queryform = ref({} as any);
const getForm = () => {
  const params = props.getQueryform
    ? props.getQueryform(queryform.value)
    : Object.assign({}, queryform.value);

  /* 如果有时间选择则统一处理 */
  if (params.time && params.time.length) {
    params.params = {
      startTime: params.time[0],
      endTime: params.time[1]
    };
    delete params.time;
  }
  return params;
};

// 获取默认值
const defaultVal = formConfig.filter(ele => ele.value);
defaultVal.map(item => {
  queryform.value[item.prop] = item.value;
});

/** 分页配置 */
const { pagination } = useTableConfig();
const tableData = ref([] as any);
const loading = ref(false);
const initData = (needInit = true) => {
  loading.value = true;
  if (props.api) {
    const params = {
      pageSize: pagination.pageSize,
      pageNum: needInit ? 1 : pagination.currentPage
    };
    Object.assign(params, getForm());
    props
      .api(params)
      .then(res => {
        tableData.value = res.rows;
        loading.value = false;
        pagination.total = Number(res.total);
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    loading.value = false;
  }
};

onMounted(() => {
  initData();
});

// 列表选择
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  emit("multipleSelection", val);
};

defineExpose({
  getForm,
  getSelection: () => multipleSelection.value,
  initData
});
</script>

<style lang="scss" scoped>
.main-box {
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>
